<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    {{ message }}
    <span>{{age}}</span>
    <ul>
<!--        item是一个变量名，可以完全自定义-->
        <li v-for="item in a1">{{item}}</li>
    </ul>
    <ul>
        <li v-for="item in obj">{{item}}</li>
    </ul>
    <ul>
<!--        index也是一个变量，针对数据就是索引-->
        <li v-for="(item, index) in a1">{{index}}-{{item}}</li>
    </ul>
    <ul>
<!--        第二个变量就是key-->
        <li v-for="(val, key) in obj">{{key}}-{{val}}</li>
    </ul>
<!--    v-text指令与{{}}语法类似-->
    <span v-text="html"></span>
<!--    v-html会将html代码解析-->
    <span v-html="html"></span>
<!--    v-show：控制元素的隐藏或显示，效果相当于css中display:none;-->
    <div v-show="isShow">显示的隐藏与显示</div>

    <div v-if="age < 20">年龄小于20</div>
    <div v-else-if="age == 20">年龄等于20</div>
    <div v-else>年龄大于20</div>
<!--    v-for和v-if指令的优先级-->
    <ul>
        <!--        <li v-for="item in a1" v-if="item.length == 2">{{item}}</li>-->
<!--                <li v-for="item in a2" v-if="item.age >= 30">{{item}}</li>-->
<!--        如果有必须通过判断来使用的情况，就需要通过函数来处理-->
    </ul>
<!--    v-on:事件名='函数名'-->
<!--    不传参，默认第一个参数就是事件对象-->
    <button v-on:click="t1">按钮</button>
    <button v-on:click="t2(100)">按钮传参数</button>
    <button v-on:click="t3(200, $event)">按钮传参数和事件参数</button>
<!--    事件绑定的简写方式-->
    <button @click="t1">按钮</button>
<!--    如果标签的属性值是一个vue中变量时，需要使用v-bind指令-->
    <div v-bind:title="message">v-bind演示</div>
<!--    v-bind一般与表单组件使用较多，简写:-->
    <input type="text" :value="message">
    <input type="text" :value="age">
    <input type="text" :value="obj.name">
<!--
    v-bind：是一种单向绑定，当数据发生变量时，页面就自动更新
    v-model：是一种双向绑定，具有v-bind的特别，同时如果在页面上修改了数据，那么该数据的变量的值也会被修改
-->
    <hr>
    <input type="text" v-model="message">
<!--    不需要让vue解析的内容-->
    <span v-pre>{{age}}</span>的值是{{age}}
<!--    v-once：当数据发生变化时，不会再更新了-->
    <hr>
    <span v-once>{{message}}</span>
<!--    v-cloak：遮罩，当Vue还没有解析完成时，不再显示标签内容-->
    <p v-cloak>{{message}}</p>
</div>
<!--引入Vue3的依赖-->
<script src="./js/vue.global.js"></script>
<script>
    // 从Vue这个实例中解构出createApp函数
    const { createApp } = Vue // 解构，ES6提供一种写法
    // 定义了一个变量createApp，是Vue.createApp属性的别名
    // const createApp = Vue.createApp;
    // const ref = Vue.ref;
    // const reactive = Vue.reactive;

    // createApp是一个创建Vue3实例的函数
    const app = createApp({
        // 就是所有变量保存的位置，和Vue2是一样的，Vue3支持Vue大部分的使用方式，但是Vue提供一种全新写法组合式Api
        data() {
            return {
                message: 'Hello Vue!',
                html: "<button>按钮</button>",
                isShow: true,
                age: 20,
                a1: ['a', 'b', 'cd'],
                obj: {
                    name: '张三',
                    age: 30,
                    study: "Java"
                },
                a2: [
                    {
                        name: "s1",
                        age: 20
                    },
                    {
                        name: "s2",
                        age: 30
                    }
                ]
            }
        },
        methods: {
            t1(e) {
                console.log("t1", e)
            },
            t2(val) {
                console.log("t2", val)
            },
            t3(val, e) {
                console.log("t3", val, e)
            },
        }
    });
    // 挂载，与页面上的Dom元素关联的意思
    // #app：id为app的元素
    app.mount('#app');
</script>
</body>
</html>